<template>
    <div class="header">
        <div class="header2">批改试卷</div>
    </div>
    <div v-for="(subQuestion,index1) in subQuestionList" :key="index1" class="main">
        <div class="student"><el-icon><Avatar /></el-icon>{{ subQuestion.studentName }}</div>
        <div class="questions">
           <div v-for = "(item,index2) in subQuestion.studentSubQuestions" :key="index2">
             <div class="topic">{{index2+1}}、{{ item.topic }}</div>
             <div class="studentAnswer">答: {{ item.studentAnswer }}</div>
             <div class="answer">参考答案: {{ item.answer }}</div>
             <el-input v-model="item.score" style="width:240px" placeholder="打分"/>
           </div>
        </div>
    </div>
    <button @click="finished">完成提交</button>
</template>

<script setup>
import {ref,onMounted} from 'vue';
import { interceptor } from '@/utils/interceptor';
import { useRoute } from 'vue-router';


const route = useRoute();
const examId = route.params.examId;
const subQuestionList = ref([]);
const teacherCorrectedExam = ref([])

onMounted(()=>{
    //console.log('correct_exam_id:',examId)
    search()
})

//请求获取学生主观题答题情况
const search = ()=>{
    const httpInstance = interceptor()
    httpInstance.get(`/teacher/exam/getScores/${examId}`)
       .then((res) => {
            if(res.data && Array.isArray(res.data.data)){
                subQuestionList.value = res.data.data.map(subQuestions => ({
                    studentId: subQuestions.studentId,
                    studentName:subQuestions.studentName,
                    studentSubQuestions:subQuestions.studentSubQuestions
                })
                )
            }
            console.log('subQuestionList',subQuestionList.value)
       })
       .catch((error) => {
         console.error("查询学生答题情况失败:",error)
       })
}

// 提交
const finished = () => {
    for (let i = 0; i < subQuestionList.value.length; i++) {
        let finalScore = 0;
        const studentSubQuestions = subQuestionList.value[i].studentSubQuestions;
        for (let j = 0; j < studentSubQuestions.length; j++) {
            finalScore += Number(studentSubQuestions[j].score);
        }

        // 构造新的评分对象并添加到 teacherCorrectedExam
        teacherCorrectedExam.value.push({
            userId: Number(subQuestionList.value[i].studentId), // 确保转换为数字
            examId: Number(examId), // 如果examId是字符串，也需要转换
            examScore: finalScore
        });
    }
    console.log("Sending data:", JSON.stringify(teacherCorrectedExam.value, null, 2));

    const httpInstance = interceptor()
    httpInstance.post('/teacher/exam/updateScore', teacherCorrectedExam.value)
       .then((res) => {
          if(res.data.code == 1){
            alert('提交成功！')
          }
       }).catch((error) => {
        console.error('提交失败:', error)
       })
}
</script>

<style scoped>
 .header {
    display: flex;
    align-items: center;
    padding: 5px;
    border-left: 2px solid #409EFF;
    position:fixed;
  }

  .header2 {
    margin-left: 5px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }

  .main{
    width: 70%;
    height: 100%;
    margin-left:15%;
    margin-top:2%;
    background-color:#dae2ab;
    padding:25px;
  }

  .student{
    font-size:33px;
    font-weight: 550;
    color: rgb(255, 250, 94);
    margin-bottom:15px;
  }

  .question{
    position: relative;
    margin-left:50%;
  }
  .topic{
    font-size:20px;
  }
  .studentAnswer{
    font-size:18px;
  }
  .answer{
    font-size:18px;
    color:rgb(163, 35, 35);
  }
</style>